<template>
  <div>
    <div class="layout-container">
      <PlutoDetailHeader
        :top-left-content="headerData.topLeftContent"
        :top-right-content="headerData.topRightContent"
        :bottom-left-content="headerData.bottomLeftContent"
        :bottom-right-content="headerData.bottomRightContent"
        :top-left-icon="headerData.topLeftIcon"
        :background-color="headerData.backgroundColor"
        :height="headerData.height"
      />

      <main class="layout-main">
        <aside class="layout-sidebar">
          <!-- 左侧边栏内容 -->
        </aside>
        <section class="layout-content">
          <div class="content-wrapper">
            <div class="main-content">
              <!-- 主要内容区域 -->
              <div v-for="i in defaultConfig.contentItems" :key="i" class="content-item">
                {{ defaultConfig.itemText }} {{ i }} - {{ defaultConfig.contentText }}
              </div>

            </div>

            <PlutoDetailFooter :show-right="showRightBtn" @next-click="handleNext">
              <template v-slot:left>
                <el-popover
                  placement="top"
                  width="200"
                  trigger="click">
                  <div>
                    <el-tree
                      class="filter-tree"
                      :data="operateDocumentsTree"
                      :props="defaultProps"
                      default-expand-all
                      ref="tree"
                      @node-click="handleDocNext"
                      :expand-on-click-node="false">
                    </el-tree>
                  </div>
                  <span class="no-animation-popover" slot="reference">文书制作</span>
                </el-popover>
              </template>
            </PlutoDetailFooter>
          </div>
        </section>
      </main>
    </div>

    <PlutoDrawer
      :visible.sync="drawerVisible"
      :config="drawerConfig"
      @button-click="handleAnyButtonClick"
    >
      <template v-slot:content>
        <div class="content-container">
          <div class="left-content-container" :style="leftContainerStyle">
            <h3 class="section-title">基本信息</h3>
            <div class="form-group">
              <label class="form-label">姓名</label>
              <el-input v-model="form.name" placeholder="请输入姓名" class="form-input"></el-input>
            </div>
            <div class="form-group">
              <label class="form-label">年龄</label>
              <el-input v-model="form.age" placeholder="请输入年龄" class="form-input"></el-input>
            </div>
            <div class="form-group">
              <label class="form-label">邮箱</label>
              <el-input v-model="form.email" placeholder="请输入邮箱" class="form-input"></el-input>
            </div>
            <div class="form-group">
              <label class="form-label">电话</label>
              <el-input v-model="form.phone" placeholder="请输入电话" class="form-input"></el-input>
            </div>
          </div>
          <div class="right-content-container" :style="rightContainerStyle">
            <div class="custom-steps-container" v-if="showSteps">
              <el-steps :active="activeStep" align-center finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="关联文书"></el-step>
                <el-step title="完成"></el-step>
              </el-steps>
            </div>

            <div class="middle-section" v-if="activeStep === 1">
              <h3 class="section-title">基本信息</h3>
              <div class="form-group">
                <label class="form-label">姓名</label>
                <el-input v-model="form.name" placeholder="请输入姓名" class="form-input"></el-input>
              </div>
              <div class="form-group">
                <label class="form-label">年龄</label>
                <el-input v-model="form.age" placeholder="请输入年龄" class="form-input"></el-input>
              </div>
              <div class="form-group">
                <label class="form-label">邮箱</label>
                <el-input v-model="form.email" placeholder="请输入邮箱" class="form-input"></el-input>
              </div>
              <div class="form-group">
                <label class="form-label">电话</label>
                <el-input v-model="form.phone" placeholder="请输入电话" class="form-input"></el-input>
              </div>
            </div>

            <div class="middle-section" v-if="activeStep === 2">
              <PlutoTabs
                :tabs="tabConfigs"
                :default-active="activeTab"
                @tab-change="handleTabChange"
                :a4-height="640"
                ref="plutoTabs"
              />
            </div>
          </div>
        </div>
      </template>
    </PlutoDrawer>
  </div>
</template>

<script>
import PlutoDrawer from '@/components/PlutoDrawer/PlutoDrawer.vue'
import PlutoTabs from "@/components/PlutoTabs/PlutoTabs.vue";
import PlutoDetailHeader from "@/components/PlutoDetailHeader/PlutoDetailHeader.vue";
import PlutoDetailFooter from "@/components/PlutoDetailFooter/PlutoDetailFooter.vue";
import * as api from './api'
import {selectDcoTemplateData} from "./api";

export default {
  components: {
    PlutoTabs,
    PlutoDrawer,
    PlutoDetailHeader,
    PlutoDetailFooter
  },
  data() {
    return {
      drawerVisible: false,
      confirmLoading: false,
      activeStep: 1,
      showSteps: false,
      showRightBtn: false,
      documentCatalogCode: '',
      drawerConfig: {
        size: '100%',
        footerAlign: 'center',
        contentHeight: 'auto',
        title: '用户信息编辑',
        buttons: [
          {
            key: 'cancel',
            text: '取消',
            type: 'default',
            isShow: true,
            autoClose: true
          },
          {
            key: 'prev',
            text: '上一步',
            type: 'default',
            isShow: false
          },
          {
            key: 'next',
            text: '下一步',
            type: 'primary',
            isShow: true
          },
          {
            key: 'saveDraft',
            text: '保存草稿',
            type: 'default',
            isShow: false
          },
          {
            key: 'preview',
            text: '预览',
            type: 'default',
            isShow: false
          },
          {
            key: 'submit',
            text: '提交',
            type: 'primary',
            isShow: false,
            autoClose: false
          }
        ]
      },


      form: {
        name: '',
        age: '',
        email: '',
        phone: ''
      },
      config: {
        autoSave: true,
        notifications: false
      },
      permission: {
        level: 'read'
      },
      currentTime: '',

      activeTab: '',
      tabConfigs: [
        {
          id: 'approval',
          title: '有关事项审批表',
          formTemplate: '',
        },
        {
          id: 'punishment',
          title: '行政处罚事先告知书',
          formTemplate: ''
        },
        {
          id: 'other',
          title: '其他文书',
          formTemplate: ''
        }
      ],

      headerData: {
        topLeftContent: '1113-4-测试涉嫌处罚子鱼案',
        topRightContent: '用户信息',
        bottomLeftContent: '当前位置：首页 > 详情',
        bottomRightContent: '2024年1月15日 14:30',
        topLeftIcon: 'el-icon-document',
        backgroundColor: '#4377E4',
        height: '80px'
      },
      defaultConfig: {
        title: '表单编辑',
        width: '50%',
        contentHeight: 500,
        contentText: '这是一段信息，下面将生成足够多的内容来测试滚动效果。',
        itemText: '内容项',
        contentItems: 50,
        // 按钮文本配置
        cancelText: '取消',
        confirmText: '提交',
        confirmButtonType: 'primary'
      },
      operateDocumentsTree: [],

      defaultProps: {
        children: 'children',
        label: 'documentCatalogName',
        id: "documentCatalogCode"
      }
    }
  },
  mounted() {
    this.updateTime();
    this.canCreateDocumentsAction();
    this.activeStep = 1
  },
  methods: {
    handleAnyButtonClick(eventData) {
      // cancel prev next saveDraft preview submit
      console.log('按钮点击事件:', eventData)
      console.log('按钮点击事件:', eventData.buttonKey)
      if (eventData.buttonKey === 'next') {
        this.activeStep = 2
        // 使用 find 方法查找按钮
        const cancelButton = this.drawerConfig.buttons.find(btn => btn.key === 'cancel')
        const nextButton = this.drawerConfig.buttons.find(btn => btn.key === 'next')
        const prevButton = this.drawerConfig.buttons.find(btn => btn.key === 'prev')
        const saveDraftButton = this.drawerConfig.buttons.find(btn => btn.key === 'saveDraft')
        const previewButton = this.drawerConfig.buttons.find(btn => btn.key === 'preview')
        const submitButton = this.drawerConfig.buttons.find(btn => btn.key === 'submit')

        if (cancelButton) cancelButton.isShow = false
        if (nextButton) nextButton.isShow = false
        if (prevButton) prevButton.isShow = true
        if (saveDraftButton) saveDraftButton.isShow = true
        if (previewButton) previewButton.isShow = true
        if (submitButton) submitButton.isShow = true


        // 延迟设置第一个标签页内容
        setTimeout(() => {
          if (this.$refs.plutoTabs && this.tabConfigs[0]?.formTemplate) {
            this.$refs.plutoTabs.setTabContent(this.tabConfigs[0].id, this.tabConfigs[0].formTemplate)
          }
          console.log("😍😍😍😍😍"+this.$refs.plutoTabs)
          console.log("😍😍😍😍😍"+this.tabConfigs[0].formTemplate)
        }, 100)

      }
      if (eventData.buttonKey === 'prev') {
        this.activeStep = 1
        const cancelButton = this.drawerConfig.buttons.find(btn => btn.key === 'cancel')
        const nextButton = this.drawerConfig.buttons.find(btn => btn.key === 'next')
        const prevButton = this.drawerConfig.buttons.find(btn => btn.key === 'prev')
        const saveDraftButton = this.drawerConfig.buttons.find(btn => btn.key === 'saveDraft')
        const previewButton = this.drawerConfig.buttons.find(btn => btn.key === 'preview')
        const submitButton = this.drawerConfig.buttons.find(btn => btn.key === 'submit')

        if (cancelButton) cancelButton.isShow = true
        if (nextButton) nextButton.isShow = true
        if (prevButton) prevButton.isShow = false
        if (saveDraftButton) saveDraftButton.isShow = false
        if (previewButton) previewButton.isShow = false
        if (submitButton) submitButton.isShow = false
      }
    },

    handleTabChange(tabId) {
      console.log('切换到tab:', tabId)
      console.log('htmlContent:',this.$refs.plutoTabs)
      let htmlContent = this.tabConfigs.find(btn => btn.id === tabId).formTemplate
      console.log('切换到tab:', htmlContent)
       this.$refs.plutoTabs.setTabContent(tabId, htmlContent);
    },
    handleTabChange2(tabId) {
      console.log('切换到tab:', tabId);
      let htmlContent = ``;
      switch (tabId) {
        case 'approval':
          htmlContent = `<h4>有关事项审批表</h4>`;
          break;
        case 'punishment':
          htmlContent = `<h4>行政处罚事先告知书</h4>`;
          break;
        case 'other':
          htmlContent = `
            <div class="bottom-section">
              <div class="a4-preview">
                <div class="a4-content">
                  <h4>信息预览报告</h4>
                  <div class="preview-item">
                    <span class="label">提交时间:</span>
                    <span class="value">${this.currentTime}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>  <div class="preview-item">
                    <span class="label">用户信息:</span>
                    <span class="value">${this.form.name ? this.form.name : '待完善'}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">配置状态:</span>
                    <span class="value">${this.config.autoSave ? '已配置' : '未配置'}</span>
                  </div>
                  <div class="preview-item">
                    <span class="label">权限级别:</span>
                    <span class="value">${this.permission.level}</span>
                  </div>
                </div>
              </div>
            </div>`;
          break;
      }
      this.$refs.plutoTabs.setTabContent(tabId, htmlContent);
    },

    openDrawer() {
      this.drawerVisible = true
      this.updateTime();
    },

    next() {
      if (this.active++ > 2) this.active = 0
    },

    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleString('zh-CN');
    },


    handleNext() {
      console.log('点击下一环节');
      this.drawerVisible = true
      this.showSteps = true
       this.selectDcoTemplateDataAction()

      // this.$message.success('进入下一环节');
    },
    handleDocNext(data, node, component) {
      console.log('点击跟多文书制作');
      // 阻止父节点的任何点击行为
      if (!node.isLeaf) {
        return
      }
      this.drawerVisible = true
      this.showSteps = false
      this.activeStep = 2


      console.log('点击了节点:', JSON.stringify(data, null, 2));
    },

    canCreateDocumentsAction() {
      let caseId = this.$route.query.uid;
      api.operateBtnArea({"caseId": caseId}).then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.operateDocumentsTree = res.data.canOperateDocuments
          this.showRightBtn = res.data.nextStageBtn.hasNext
          this.tabConfigs = res.data.nextStageBtn.tabConfigs

        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });

    },
    selectDcoTemplateDataAction() {
      for (let i = 0; i < this.tabConfigs.length; i++) {
        api.selectDcoTemplateData({"documentCatalogCode": this.tabConfigs[i].id}).then(res => {
          if (200 === res.code) {
            this.loading = true;
            this.tabConfigs[i].formTemplate = res.data.formTemplate
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      }
    },


  },
  computed: {
    // 根据 activeStep 动态计算左右容器样式
    leftContainerStyle() {
      if (this.activeStep === 1) {
        return {
          width: '40%',
          borderRight: '1px solid #e8e8e8',
          backgroundColor: '#FFFFFF',
          marginRight: '15px'
        }
      } else if (this.activeStep === 2) {
        return {
          flex: '1',
          borderRight: '1px solid #e8e8e8',
          backgroundColor: '#FFFFFF',
          marginRight: '15px'
        }
      }
      return {}
    },
    rightContainerStyle() {
      if (this.activeStep === 1) {
        return {
          flex: '1',
          backgroundColor: '#FFFFFF',
          display: 'flex',
          flexDirection: 'column',
          gap: '10px',
          minHeight: '0',
          padding: '10px 25px'
        }
      } else if (this.activeStep === 2) {
        return {
          width: '750px',
          backgroundColor: '#FFFFFF',
          display: 'flex',
          flexDirection: 'column',
          gap: '10px',
          minHeight: '0'
        }
      }
      return {}
    },


    // 取消按钮处理方法
    // handleCancel(eventData) {
    //   this.$confirm('确定要取消吗？未保存的数据将丢失。', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '继续编辑',
    //     type: 'warning'
    //   }).then(() => {
    //     this.drawerVisible = false
    //     this.$message.info('操作已取消')
    //   }).catch(() => {
    //     // 用户选择继续编辑
    //   })
    // },
  }
}
</script>

<style>
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.layout-main {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.layout-sidebar {
  width: 330px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  overflow-y: auto;
  padding: 16px;
}

.layout-content {
  flex: 1;
  background: #EEEEEE;
  padding: 0 0 0 8px;
}

.layout-content {
  position: relative;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.main-content {
  flex: 1;
  overflow-y: auto; /* 保持滚动功能 */

  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.main-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* 滚动条美化 */
.layout-sidebar::-webkit-scrollbar,
.layout-content::-webkit-scrollbar {
  width: 6px;
}

.layout-sidebar::-webkit-scrollbar-track,
.layout-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.layout-sidebar::-webkit-scrollbar-thumb,
.layout-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.layout-sidebar::-webkit-scrollbar-thumb:hover,
.layout-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Firefox 滚动条 */
.layout-sidebar,
.layout-content {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .layout-main {
    flex-direction: column;
  }

  .layout-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
  }
}


.no-animation-popover {
  animation: none !important;
  transition: none !important;
  padding: 8px 30px;
  background-color: #4377E4;
  color: #FFFFFF;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
}


</style>

<style scoped>
.content-container {
  display: flex;
  height: 100%;
  min-height: 400px;
}

.left-content-container,
.right-content-container {
  padding: 10px 10px;
  overflow-y: auto;
  border-radius: 4px;
  transition: all 0.3s ease; /* 添加过渡动画 */

}

.right-content-container {
  /* 改为 */
  height: 100%;
  overflow: hidden; /* 隐藏滚动条 */
  display: flex;
  flex-direction: column;
}

/* 自定义步骤条样式 */
.custom-steps-container {
  color: #409EFF;
}

.custom-steps-container :deep(.el-step) {
  display: flex;
  align-items: center;
}

.custom-steps-container :deep(.el-step__main) {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-left: 8px;
}

.custom-steps-container :deep(.el-step__icon) {
  margin-right: 8px;
  flex-shrink: 0;
}

.custom-steps-container :deep(.el-step__title) {
  margin-right: 0;
  line-height: 1;
  font-size: 14px;
}

.custom-steps-container :deep(.el-step__line) {
  top: 50%;
  transform: translateY(-50%);
}

.custom-steps-container :deep(.el-step__head) {
  flex-direction: row;
  align-items: center;
}

.custom-steps-container :deep(.el-step__description) {
  display: none;
}

/* 中：标签页区域 */
.middle-section {
  flex: 0 0 auto;
}

/* 下：A4区域 */
.bottom-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  height: 200px;
}

.a4-preview {
  flex: 1;
  border: 1px solid #ddd;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.a4-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
}

.a4-content h4 {
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.preview-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.preview-item .label {
  font-weight: 500;
  color: #666;
}

.preview-item .value {
  color: #333;
}

.section-title {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
  color: #333;
  font-size: 18px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-input {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }

  .left-content-container,
  .right-content-container {
    width: 100%;
    flex: none;
  }

  .left-content-container {
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .right-content-container {
    gap: 15px;
  }

  .bottom-section {
    height: 300px;
  }

  .custom-steps-container :deep(.el-step__main) {
    margin-left: 4px;
  }

  .custom-steps-container :deep(.el-step__title) {
    font-size: 12px;
  }
}
</style>
